window.onload = function() {
    (function() {
        var focus = document.querySelector('.focus');
        var r = document.querySelector('.focus_r');
        var f = document.querySelector('.focus_f');
        var focusWidth = focus.clientWidth;
        // 当鼠标移动到focus上面时就显示左右按钮 用 mouseenter
        focus.addEventListener('mouseenter', function() {
            r.style.display = 'block';
            f.style.display = 'block';
            // 停止自动播放轮播图
            clearInterval(timer);
        });
        // 当鼠标离开focus时就隐藏左右按钮 用 mouseleave
        focus.addEventListener('mouseleave', function() {
            r.style.display = 'none';
            f.style.display = 'none';
            // 继续自动播放轮播图
            timer = setInterval(function() {
                r.click();
            }, 2000);
        });
        // 遍历小li
        var ul = document.querySelector('.focus_ul');
        var lis = ul.children;
        var b_ul = document.querySelector('.focus_b ul');
        for (var i = 0; i < lis.length; i++) {
            // 创建小圆点
            var li = document.createElement('li');
            // 给每一个小圆点自定义添加索引号属性
            li.setAttribute('index', i);
            // 添加小圆点
            b_ul.appendChild(li);
            // 给第一个小圆点添加border类
            b_ul.children[0].className = 'border';
            // 给小圆点绑定点击事件
            li.addEventListener('click', function() {
                // 点击小圆点 ul移动
                // 核心原理：移动距离 = 负的索引号 * 图片宽度
                // 获得当前小圆点的索引号
                var index = this.getAttribute('index');
                num = index;
                circle = index;
                animate(ul, -index * focusWidth);
                // 排他思想
                for (var i = 0; i < b_ul.children.length; i++) {
                    b_ul.children[i].className = '';
                };
                this.className = 'border';
            });
        };
        // 点击右边按钮
        // 深拷贝第一张图片放在最后面
        var first = lis[0].cloneNode(true);
        ul.appendChild(first);
        // 声明一个变量用于表示轮播图
        var num = 0;
        // 声明一个变量用于表示小圆点
        var circle = 0;
        // 节流阀
        var flag = true;
        r.addEventListener('click', function() {
            if (flag) {
                flag = false;
                // 当num等于7时，也就是轮播图最后一张图片时
                if (num == lis.length - 1) {
                    // ul要快速的复原为left = 0
                    ul.style.left = 0;
                    num = 0;
                };
                num++;
                animate(ul, -num * focusWidth, function() {
                    flag = true;
                });
                circle++;
                // 如果circle ==7 说明走到最后我们克隆的这张照片了  我们就复原
                if (circle == b_ul.children.length) {
                    circle = 0;
                };
                // 调用小圆点变化函数
                circleChange();
            }
        });
        // 点击左边按钮
        f.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = lis.length - 1;
                    ul.style.left = -num * focusWidth + 'px';
                };
                num--;
                animate(ul, -num * focusWidth, function() {
                    flag = true;
                });
                circle--;
                circle = circle < 0 ? circle = b_ul.children.length - 1 : circle;
                circleChange();
            }
        });
        // 小圆点变化函数
        function circleChange() {
            for (var i = 0; i < b_ul.children.length; i++) {
                b_ul.children[i].className = '';
            }
            b_ul.children[circle].className = 'border';
        };
        // 自动播放轮播图
        var timer = setInterval(function() {
            r.click();
        }, 2000);
    })()
}